<template>
  <div class="center_cage">
    <div class="classified">
      <ul>
        <li class="area">
          <a class="adtext">{{ area }}<span>k㎡</span></a>
        </li>
        <li class="population">
          <a class="adtext">{{ people }}<span>万</span></a>
        </li>
        <li class="gdp">
          <a class="adtext">{{ gdp }}<span>亿元</span></a>
        </li>
        <li class="income">
          <a class="adtext">{{ money }}<span>亿元</span></a>
        </li>
      </ul>
    </div>
    <!-- 地图 -->
    <home-map />
  </div>
</template>

<script>
import Sever from "@/api/selfApi";
import HomeMap from "@/components/home/Map.vue";
export default {
  name: "HomeMiddle",
  components: {
    HomeMap,
  },
  data() {
    return {
      area: 0,
      people: 0,
      gdp: 0,
      money: 0,
    };
  },
  computed: {
    changeData() {
      return this.$store.state.depCode;
    },
  },
  watch: {
    changeData: {
      handler(newV) {
        this.refreshData(newV);
      },
      deep: true,
      immediate: true,
    },
  },
  // mounted() {
  //   this.refreshData("36%");
  // },
  methods: {
    async refreshData(depCode) {
      await Sever.smz
        .getGeoSituation({ depCode: depCode })
        .then((res) => {
          if (res.code == 1) {
            this.area = res.data.area;
            this.people = res.data.population;
            this.gdp = res.data.regionalgdp;
            this.money = res.data.revenue;
          } else {
            console.log("geoSituation请求错误！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>